<template>
  <div class="navigation-container">
    <el-menu class="navigation-menu" :default-active="activeIndex">
      <el-sub-menu v-for="(group, index) in menuGroups" :key="index" :index="String(index)">
        <template #title>
          <el-icon>
            <component :is="group.icon"/>
          </el-icon>
          <span>{{ group.title }}</span>
        </template>
        <el-menu-item v-for="item in group.items" :key="item.path" :index="item.path" @click="handleClick(item.path)"
                      :class="{'has-error': item.hasError}">
          <el-icon>
            <component :is="item.icon"/>
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  Monitor,
  Box,
  DataLine,
  Van,
  Cellphone,
  Connection
} from '@element-plus/icons-vue'

const router = useRouter()
const activeIndex = ref('')

const menuGroups = [
  {
    title: 'MES系统',
    icon: 'Monitor',
    items: [
      { name: 'JC生产线', path: '/JCLines', icon: 'DataLine' },
      { name: 'TH生产线', path: '/THLines', icon: 'DataLine' },
      { name: 'LVT生产线', path: '/LVTLines', icon: 'DataLine' },
      { name: 'LMHH生产线', path: '/LMHHLines', icon: 'DataLine' },
      { name: '工序养身区', path: '/KeepingArea', icon: 'Box', hasError: true },
      { name: 'LVT上料', path: '/mesLVTFeeding', icon: 'Box', hasError: true },
      { name: 'IOT数据', path: '/iotData', icon: 'Connection', hasError: true },
      { name: 'iotHistorical', path: '/iotHistorical', icon: 'Van', hasError: true },
      { name: 'agvTask', path: '/agvTask', icon: 'Van', hasError: true }
    ]
  },
  {
    title: 'WMS系统',
    icon: 'Box',
    items: [
      { name: '精加工产线汇总数据', path: '/finishingProductionLine', icon: 'DataLine' },
      { name: '库存信息汇总', path: '/inventoryInforSummary', icon: 'Box' },
      { name: '精加工点位实时数据', path: '/iotFigure', icon: 'Box', },
      { name: '待发货信息', path: '/stayDeliveryInfo', icon: 'Box', hasError: true },
      { name: '物料库存', path: '/materielStorage', icon: 'Box', hasError: true },
      { name: '挤出进出', path: '/extrudeInAndOut', icon: 'Box', hasError: true },
      { name: '成品库位', path: '/finishedLocation', icon: 'Box', hasError: true },
      { name: 'FG库位', path: '/FGLocation', icon: 'Box', hasError: true },
      { name: '发货信息', path: '/shippingInfor', icon: 'Van', hasError: true }
    ]
  },
  {
    title: 'AGV',
    icon: 'Box',
    items: [
      { name: 'AGV', path: '/agv', icon: 'Van', },
      { name: 'AGV任务/报警统计', path: '/statistics', icon: 'Monitor' },
      { name: 'AGV明细', path: '/agvDetails', icon: 'Box' },
      { name: 'AGV报警历史', path: '/agvAlarmHistory', icon: 'Box' },
    ]
  },
  {
    title: '可视化',
    icon: 'Box',
    items: [
      { name: '仓库', path: '/warehouse', icon: 'Box' },
      { name: '物料调拨信息', path: '/transferQuantity', icon: 'Box' },
      { name: '来料入库信息', path: '/warehouseEntry', icon: 'Box' },
      { name: '物料数据总览', path: '/generalView', icon: 'Box' },
      { name: '物料调拨汇总', path: '/allocationInforView', icon: 'Box' },
      { name: '产线状态监测', path: '/ProductionLineMonitoring', icon: 'Box' },
      { name: '产线设备详情', path: '/ProductionLineDetails', icon: 'Monitor' },
      { name: '罐体', path: '/tankBody', icon: 'Monitor' },
      { name: '罐体明细', path: '/details', icon: 'Monitor' },
      { name: '入库明细页面', path: '/InventoryDetails', icon: 'Monitor' },
      { name: '预混明细页面', path: '/PreMixedDetails', icon: 'Monitor' },

    ]
  },
  {
    title: '其他功能',
    icon: 'Connection',
    items: [
      { name: '手机屏幕', path: '/mobilePhoneScreen', icon: 'Cellphone' },
      { name: '设备生产线', path: '/equipmentProdLine', icon: 'DataLine', hasError: true }
    ]
  }
]

const handleClick = (path) => {
  router.push(path)
}
</script>

<style scoped lang="scss">
.navigation-container {
  width: 250px;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;

  .navigation-menu {
    height: 100%;
    border-right: none;
  }

  :deep(.el-sub-menu__title) {
    font-size: 16px;
    font-weight: bold;
  }

  :deep(.el-menu-item) {
    font-size: 14px;

    &.has-error {
      text-decoration: line-through;
      opacity: 0.7;
    }
  }

  .el-icon {
    margin-right: 8px;
  }
}
</style>
